import { useQuery } from '@tanstack/vue-query'
import type { TableColumnData, TableData } from '@arco-design/web-vue'

import { ApiSearchClasses, useSearchClassesQueryKey } from '@/apis/class'
import { useRouter } from 'vue-router'
import { RouterName } from '@/router/name'

export function useClassTable() {
  const columns = [
    {
      title: '班级',
      dataIndex: 'id',
      align: 'center',
      width: 100,
      sortable: {
        sortDirections: ['ascend', 'descend']
      }
    },
    {
      title: '教师',
      dataIndex: 'teacher',
      slotName: 'teacher',
      width: 200
    },
    {
      align: 'center',
      title: '课程',
      dataIndex: 'courseID',
      width: 100,
      sortable: {
        sortDirections: ['ascend', 'descend']
      }
    },
    {
      title: '班级名称',
      dataIndex: 'name',
      width: 180
    },
    {
      title: '班级简述',
      dataIndex: 'description',
      slotName: 'description'
    }
  ] as const satisfies TableColumnData[]

  const { data: classes } = useQuery({
    staleTime: 1000 * 60 * 5,
    queryKey: useSearchClassesQueryKey({}),
    queryFn: ({ queryKey: [, , query] }) => ApiSearchClasses(query),
    select: ({ data }) => data
  })

  const router = useRouter()
  const gotoClassDetail = async (record: TableData) => {
    await router.push({
      name: RouterName.ClassDetail,
      params: {
        classID: record.id
      }
    })
  }

  return {
    columns,
    classes,
    gotoClassDetail
  }
}
